<template>
  <div class="page-wrapper text-right">
    <span class="total">共 {{ total }} 条</span>

    <a-pagination
      class="page-content"
      :pageSizeOptions="['10', '20', '30', '40', '50']"
      showSizeChanger
      :total="total"
      :pageSize="pageSize"
      :current="current"
      @change="onChange"
      @showSizeChange="onShowSizeChange"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value!=='50'">{{ props.value }}条/页</span>
        <span v-if="props.value==='50'">50条/页</span>
      </template>
    </a-pagination>
  </div>
</template>

<script>
export default {
  name: 'MyPagination',
  data () {
    return {
    }
  },
  props: {
    total: {
      require: true,
      type: Number
    },
    pageSize: {
      require: true,
      type: Number
    },
    current: {
      require: true,
      type: Number
    }
  },
  methods: {
    onChange (current, pageSize) {
      this.$emit('onChange', current, pageSize)
    },
    onShowSizeChange (current, pageSize) {
      this.$emit('onShowSizeChange', current, pageSize)
    }
  }
}
</script>

<style scoped lang="less">
.page-wrapper{
  display: flex;
  justify-content: flex-end;
  padding: 25px 0 0 0 ;
  .total{
    line-height: 32px;
    padding: 0 20px;
  }
}
</style>
